<template>
  <div id="areaDiv">
    <div class="tableDiv">
      <div class="header">
        <Button v-if="modulesArr.indexOf('adminInsert')>0" class="buttonDiv addButton" type="warning" icon="md-add" @click="insertMsg">添加</Button>
      </div>
      <div class="body">
        <Table
          :loading="tableLoading"
          :columns="tableColumns"
          :data="tableData"
          @on-selection-change="tableChose"
          border
        >
          <template
            slot="action"
            slot-scope="{ row ,index }">
            <!--升序-->
            <!--            <Tooltip  placement="top" trigger="hover" content="升序">-->
            <Button
              shape="circle"
              size="small"
              icon="ios-arrow-up"
              type="primary"
              style="margin-right: 15px"
              v-if="modulesArr.indexOf('adminUpdate')>0"
              @click="updateLineSort(index,'asc')">
            </Button>
            <!--            </Tooltip >-->
            <!--降序-->
            <!--            <Tooltip placement="top" trigger="hover" content="降序">-->
            <Button
              shape="circle"
              size="small"
              icon="ios-arrow-down"
              type="primary"
              style="margin-right: 15px"
              v-if="modulesArr.indexOf('adminUpdate')>0"
              @click="updateLineSort(index,'desc')">
            </Button>
            <!--            </Tooltip>-->
            <!--修改-->
            <Button v-if="modulesArr.indexOf('adminUpdate')>0" shape="circle" size="small" icon="md-create" type="success" @click="updateLine(row)" style="margin-right: 15px"></Button>
            <!--删除-->
            <Button v-if="modulesArr.indexOf('adminDelete')>0" shape="circle" size="small" icon="ios-trash" type="error" @click="deleteLine(row)"></Button>
          </template>
        </Table>
      </div>
      <div class="footer">
        <div class="commonFooterBtn">
          <Button v-if="modulesArr.indexOf('adminDelete')>0" class="buttonDiv" :disabled="tableChoseList.length<=0" @click="deleteChose" icon="ios-trash-outline" type="error">删除</Button>
        </div>
        <div class="commonFooterPage">
          <Page class="pageLine" :total="pageMsg.pageTatol" :page-size="pageMsg.pageSize" :current="pageMsg.pageNo" @on-change="pageChange"/>
        </div>
      </div>

    </div>

    <Modal
      v-model="addModal"
      @on-cancel="cancalTableForm('addMsg')"
    >
      <div class="userModalHeader" slot="header">
        <span>添加范围</span>
      </div>
      <div class="modalBody">
        <Form :model="formModal" ref="addMsg" :rules="formMsgRule" >
          <FormItem>
            <Checkbox v-model="faceSalary">面议</Checkbox>
          </FormItem>
          <FormItem prop="salaryRange" v-if="!faceSalary">
            <Input style="width: 10em" v-model="salaryRange1" placeholder="请输入起始值"/>
            <span>~</span>
            <Input style="width: 10em" v-model="salaryRange2" placeholder="请输入结束值"/>
          </FormItem>
        </Form>
      </div>
      <div slot="footer" class="userModalFooter">
        <Button icon="" type="default" @click="addModal=false;cancalTableForm('addMsg')">取消</Button>
        <Button icon="" type="primary" @click="submitAdd">保存</Button>
      </div>
    </Modal>
    <!--修改框-->
    <Modal
      v-model="updateModal"
      @on-cancel="cancalTableForm('updateMsg')"
    >
      <div class="modalHeader" slot="header">
        <span>修改</span>
      </div>
      <div>
        <Form :model="formModal" ref="updateMsg" :rules="formMsgRule" :label-width="100">
          <FormItem label="角色：" prop="roleName">
            <Input v-model="formModal.roleName" placeholder="请输入新增角色"/>
          </FormItem>
        </Form>
      </div>
      <div slot="footer" class="userModalFooter">
        <Button icon="" type="default" @click="updateModal=false;cancalTableForm('updateMsg')">取消</Button>
        <Button icon="" type="primary" @click="updateSubmit">保存</Button>
      </div>
    </Modal>

  </div>
</template>

<script>
  import qs from 'qs';
  import { mapState, mapMutations } from "vuex";

  export default {
    name: "index",
    computed: {
      ...mapState({ modulesArr: state => state.app.modulesArr })
    },
    data(){
      const validatePass = (rule, value, callback) => {

        if (this.faceSalary) {
          callback();
        }else if(this.salaryRange1 == 0||this.salaryRange2 == 0){
          callback(new Error('请输入范围'));
        } else {
          callback();
        }
      };
      return{
        addModal:false,
        updateModal:false,
        formModal:{
          pkid:0,
          salaryRange:'',
        },
        formMsgRule: {
          salaryRange: [
            // {required: true, message: '请输入角色', trigger: 'blur'},
            { validator: validatePass, trigger: "blur" },
          ],
        },
        faceSalary:false,
        salaryRange1:'',
        salaryRange2:'',
        tableLoading:false,
        tableChoseList:[],
        pageMsg:{
          pageNo:1,//当前页
          pageSize:10,//每页行数
          pageTatol:12,//总数
        },
        isDefault: false,
        tableData:[
        ],
        tableColumns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title:"薪资范围",
            key:"salaryRange",
            align: 'center'
          },
          {
            title: "操作",
            align: "center",
            slot: "action",
            width: 200,
          },
        ]
      }
    },
    methods:{
      //修改提交
      updateSubmit(){
        let that=this;
        return new Promise((resolve, reject) => {
          this.$app.post('/trole/updateRole', {
            pkid:that.formModal.pkid,
            roleName:that.formModal.roleName,
          }).then((res)=>{
            if(res.data.code==0){
              that.updateModal=false;

              that.$Message.success("修改成功");
              that.init(that.formModal.pkid);
              that.cancalTableForm('updateMsg')
            }else{
              that.$Message.error("修改失败");
            }
          }).catch((res)=>{reject(res)})
        })
      },
      //添加提交
      submitAdd(){
        let that=this;

        let params={};
        if(this.faceSalary){
          params.salaryRange="面议";
        }else{
          params.salaryRange=this.salaryRange1+"~"+this.salaryRange2;
        }
        // if(){}
        this.$refs["addMsg"].validate(valid => {
          if (valid) {
            return new Promise((resolve, reject) => {
              this.$app.post('/tsalary/addTSalary',params).then((res)=>{
                if(res.data.code==0){
                  that.addModal=false;

                  that.$Message.success("添加成功");
                  that.init(res.data.data);
                  that.cancalTableForm('addMsg');
                }else{
                  that.$Message.error("添加失败");
                }
              }).catch((res)=>{
                that.$Message.error("添加异常");
                reject(res)
              })
            })
          }
        })

      },
      cancalTableForm(name){
        // this.formItem.deviceID = null;
        this.$refs[name].resetFields();
      },
      //选择框选择
      tableChose(selection, row){
        this.tableChoseList=selection
      },
      //添加
      insertMsg(row){
        this.addModal=true;
        // this.$router.push({
        //   name:"adminInsert",
        //   query:{
        //
        //   }
        // })
      },
      updateLineSort(index,sort){
        var thisRow=this.tableData[index];
        var params=new FormData();
        params.append("pkid",thisRow.pkid);
        params.append("sort",thisRow.sort);
        params.append("type",sort);
        var a={
          pkid:thisRow.pkid,
          sort:thisRow.sort,
          type:sort
        }
        let that=this;
        this.$app.post('/tadmin/updateAdminSort',a).then((res)=>{
          if(res.data.code==0){
            that.$Message.success("调整成功");
            that.getAllTableData();
            // that.tableChoseList=[];
          }else{
            that.$Message.error("调整失败")
          }
          // console.log(res);
        })
      },
      //点击修改按钮
      updateLine(row){
        this.$router.push({
          name:"adminUpdate",
          query:{
            adminId:row.pkid
          }
        })
      },
      deleteMethod(ids){
        let that=this;
        let params={pkids:ids};
        // params=qs.stringify(params, {arrayFormat: 'repeat'});
        // console.log()
        return new Promise((resolve,reject) => {
          this.$app.post('/tsalary/deleteByIds', params ).then((res)=>{
            if(res.data.code==0){
              resolve()
            }else{
              that.$Message.error("删除失败")
              reject();
            }
            // console.log(res);
          }).catch((res)=>{

            reject(res);
          })
        })
      },
      //删除单选
      deleteLine(row){
        // console.log("点击了删除::",row);
        let that=this;
        // console.log("删除：：",);
        this.deleteMethod([row.pkid]).then(()=>{
          that.$Message.success("删除成功");
          that.getAllTableData();
        }).catch(()=>{
          that.$Message.error("删除失败")
        })
      },
      //删除多选
      deleteChose(){
        let that=this;
        // console.log("删除：：",);

        this.deleteMethod(that.tableChoseList.map(item => item.pkid)).then((res)=> {
          that.$Message.success("删除成功");
          that.getAllTableData();
          that.tableChoseList = [];
        })
        // this.$app.post('/tadmin/deleteByIds', {
        //   pkids:
        // }).then((res)=>{
        //   if(res.data.code==0){
        //     that.$Message.success("删除成功");
        //     that.getAllTableData();
        //     that.tableChoseList=[];
        //   }else{
        //     that.$Message.error("删除失败")
        //   }
        //   // console.log(res);
        // }).catch((res)=>{
        //   //console.log(response);
        // });

      },
      pageChange(pageNum){
        this.pageMsg.pageNo=pageNum
        this.getAllTableData();
      },
      getAllTableData(){
        var that=this;

        this.$app.post('/tsalary/getAllTSalary', {
          pageNo:that.pageMsg.pageNo,
          pageSize: that.pageMsg.pageSize
        }).then((res)=>{
          if(res.data.code==0){
            that.tableData=res.data.data.list;
            that.pageMsg.pageTatol=res.data.data.total;
          }
          // console.log(res);
        }).catch((res)=>{
          //console.log(response);
        });
      },
      //修改默认值
      undateDefault(row){
        let that=this;

        this.$app.post('/area/updateDefaultArea', {
          pkid:row.pkid
        }).then((res)=>{
          if(res.data.code==0){
            that.$Message.success("修改成功");
            that.getAllTableData();
          }
          // console.log(res);
        }).catch((res)=>{
          //console.log(response);
        });
      },
    },
    mounted() {
      this.getAllTableData();
    }
  }
</script>

<style lang="less" scoped>
  #areaDiv{
    width: 100%;
    height: 100%;

    &>.tableDiv{
      .header{
        &>.buttonDiv{
          margin: .5rem 0 .5rem .5rem;
        }
        &>.addButton{

        }
      }

      .body{
        margin:0 0.5rem;
      }
      .footer{
        .commonFooterBtn,.commonFooterPage{
          margin: .5rem;
        }
        .commonFooterBtn{
          float: left;
        }
        .commonFooterPage{
          float: right;
        }
      }
    }


  }
  /deep/ .modalBody{
    width: 70%;
    margin: auto;
  }
</style>
